import { WingBlank, Flex } from "antd-mobile";
import React, { Component } from "react";

import "./index.scss";

/**
 * 房屋配套信息
 */

const data = {
  衣柜: "icon-yigui",
  水壶: "icon-icon-",
  饮水机: "icon-icon-1",
  洗衣机: "icon-icon-2",
  吹风机: "icon-icon-3",
  空调: "icon-icon-4",
  电视: "icon-icon-5",
  热水器: "icon-icon-6",
  烤箱: "icon-icon-7",
  冰箱: "icon-icon-8",
  沙发: "icon-zhongshishafa",
  洗澡: "icon-xizao",
  宽带: "icon-kuandai",
  天然气: "icon-tianranqi",
  暖气: "icon-nuanqi",
};
class PrivateHousingSupporting extends Component {
  render() {
    const { houseSupporting } = this.props;
    return (
      <div className="housingSupportingWrapper">
        <WingBlank>
          <div className="title">房屋配套信息</div>
        </WingBlank>

        <WingBlank>
          <div className="content">
            <Flex wrap="wrap">
              {houseSupporting && houseSupporting.length >= 1 ? (
                houseSupporting.map((item) => {
                  return (
                    <div className="iconMsg">
                      <div className="iconSpan">
                        <span
                          className={["iconfont", data[item]].join(" ")}
                        ></span>
                      </div>
                      <div className="iconName">{item}</div>
                    </div>
                  );
                })
              ) : (
                <div className="blankSorry">
                  房东大大很懒，什么也没有写呢/(ㄒoㄒ)/~~
                </div>
              )}
            </Flex>
          </div>
        </WingBlank>
      </div>
    );
  }
}

export default PrivateHousingSupporting;
